<template>
  <div class="info-wrapper">
    <div class="info-w" @click="$router.go(-1)">
      <div class="info-c">
        <div class="close">
          <i class="iconfont icon-fanhui1"></i>
        </div>
        <span class="title">{{showTitle}}</span>
      </div>
    </div>
    <div class="info-content">
      <div class="info-tab">
        <div class="tab-item" @click="gobase" :class="{active: this.showBase}"><span>基本信息</span></div>
        <div class="tab-item" @click="gohouse" :class="{active: this.showhouse}"><span>房屋信息</span></div>
        <div class="tab-item" @click="gorent" :class="{active: this.showRent}"><span>用途信息</span></div>
        <div class="tab-item" @click="gomoney" :class="{active: this.showMoney}"><span>租金管理</span></div>
        <div class="tab-item" @click="gomend" :class="{active: this.showMend}"><span>维修信息</span></div>

        <div class="tab-item" @click="gopoint" :class="{active: this.showPoint}"><span>节点记录</span></div>
      </div>
      <houseinfo handletype="4" :func="docallback" v-show="showBase"></houseinfo>
      <basehouse handletype="4" :func="docallback" v-if="showhouse"></basehouse>
      <mendinfo v-show="showMend" handletype="4"></mendinfo>
      <rentinfo v-show="showRent" handletype="4"></rentinfo>
      <rentmoney v-show="showMoney" handletype="4"></rentmoney>
      <div class="item-info" v-show="showPoint">
        <div class="check-history">
          <div class="list" v-for="item in logData" :key="item.id">
            <div class="record clearfix" v-if="logData.length!=0">
              <div class="arrow">
                <i class="iconfont icon-sanjiao"></i>
              </div>
              <div class="node">
                <i class="iconfont icon-node1"></i>
              </div>
              <div class="type">{{item.hash.operate}}</div>
              <div class="person">操作人：{{item.hash.op}}</div>
              <div class="time" style="position:relative">
                <i class="iconfont icon-552cc390cc5b0"></i>
                <span>{{item.hash.intime}}</span>
                <!-- &&item.hash.xh!='1' -->
                <span style="color:#69f;margin-left:25px;cursor:pointer;position:absolute;width:60px" v-if="item.hash.operate=='房产信息审核通过'" @click="checkRecord(item.hash.hid,item.hash.xh)">查看</span>
                <span v-else>
                </span>
              </div>
            </div>
            <div class="record clearfix" v-else>
              <div class="arrow">
                <i class="iconfont icon-sanjiao" style="color:#6699ff63"></i>
              </div>
              <div class="node">
                <i class="iconfont icon-node1"></i>
              </div>
              <p style="text-align:center">暂无任何操作！</p>
            </div>
          </div>
        </div>
      </div>
      <checking :dotype="'4'" v-if="ischecking" :xh="xh" :hid="hid"></checking>
      <div class="picContent" @click="hidepic" v-show="isshow">
        <img :src="this.imgUrl" alt="" style="height:500px;position:relative">
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import basehouse from '~/components/houseManage/basehouse.vue';
import houseinfo from '~/components/houseManage/houseinfo.vue';
import mendinfo from '~/components/houseManage/mendInfo.vue';
import rentinfo from '~/components/houseManage/rentInfo.vue';
import rentmoney from '~/components/houseManage/rentmoney.vue';
import checking from '~/components/houseManage/checking.vue';
import checking2 from '~/components/houseManage/checking2.vue';
import checking3 from '~/components/houseManage/checking3.vue';

export default {
  data() {
    return {
      ts: this.newStore(),
      hid: '',
      xh: '',
      imgUrl: '',
      isshow: false,
      ischecking: false,
      dialogTableVisible0: false,
      different: '',
      logData: [],
      fileList: [],
      fileList2: [],
      detailData: {},
      detailData2: [],
      detailData3: [],
      repairData: {},
      rentData: {},
      dialogImageUrl: '',
      dialogVisible: false,
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      hfloor: '',
      image: '',
      rentdate: [],
      showBase: false,
      showMend: false,
      showRent: false,
      showPoint: false,
      showMoney: false,
      showhouse: false,
      showTitle: '',
      inputs: [],
      certpaper: '',
      htypeattach: '',
      image1: '',
      image2: '',
      image3: '',
      rentuseattach: '',
      actureuseattach: '',
      rentagreement: '',
      htypeArr: [],
      horgArr: [],
      checkingData: {},
      hstatusArr: [],
      usetypeArr: [],
      rentertypeArr: [],
      owntypeArr: [],
      renttypeArr: [],
      feetypeArr: [],
      rentstatuArr: [],
      danwei1Arr: [],
      danwei2Arr: [],
      renttype: '',
      logList1: [],
      logList2: [],
    };
  },
  components: {
    rentmoney,
    houseinfo,
    mendinfo,
    rentinfo,
    checking,
    checking2,
    checking3,
    basehouse,
  },
  created() {
    this.gobase();
    this.getCheckdetail();
    this.getLog();
  },
  mounted() {
    this.getSearchdetail();
  },
  methods: {
    checkRecord(hid, xh) {
      this.hid = hid;
      this.xh = xh;
      this.reload();
    },
    reload() {
      this.ischecking = false;
      this.$nextTick(() => {
        this.ischecking = true;
      });
    },
    getCheckdetail() {
      const req = {
        handle: '76ABA4BE996F68CED6E79E6CF72B4AD04920EC37433E0E2F91BE9BB85CED52D6',
        hid: this.$route.query.hid,
        token: localStorage.getItem('token'),
        xh: this.$route.query.xh,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.detailData = ts.d.data.operation2[0].hash;
        this.detailData1 = ts.d.data.operation1[0].hash;
        if (!this.detailData1.hnum) {
          this.detailData1 = this.detailData;
        }
        this.certpaper = this.detailData.certpaper;
        this.htypeattach = this.detailData.htypeattach;
        this.image1 = this.detailData.image1;
        this.image2 = this.detailData.image2;
        this.image3 = this.detailData.image3;
        if (this.detailData2.rentstart && this.detailData2.rentend) {
          this.rentdate = [this.detailData2.rentstart, this.detailData2.rentend];
        } else {
          this.rentdate = ['0', '0'];
        }
        this.getSelectList('10', 'danwei2Arr', this.detailData.danwei1);
      });
    },
    getSelectList(codetype, td, supid) {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD1C1E493C3971E71F',
        token: localStorage.getItem('token'),
        supid,
        codetype,
      };
      this.sget(this.ts, '/mainservlet', req).then((ts) => {
        this[td] = ts.d.data.operation1;
      });
    },
    showPic(name) {
      this.isshow = true;
      this.imgUrl = name;
    },
    hidepic() {
      this.isshow = false;
    },
    gobase() {
      this.showMoney = false;
      this.showBase = true;
      this.showMend = false;
      this.showRent = false;
      this.showhouse = false;
      this.showPoint = false;
      this.showHistory = false;
      this.showTitle = '基本信息';
    },
    gohouse() {
      this.showMend = false;
      this.showRent = false;
      this.showPoint = false;
      this.showMoney = false;
      this.showHistory = false;
      this.showBase = false;
      this.showhouse = true;
      this.showTitle = '房屋信息';
      this.$nextTick(() => {
        this.showhouse = true;
      });
    },
    gomend() {
      this.showhouse = false;
      this.showMoney = false;
      this.showMend = true;
      this.showBase = false;
      this.showRent = false;
      this.showPoint = false;
      this.showHistory = false;
      this.showTitle = '维修信息';
    },
    gorent() {
      this.showhouse = false;
      this.showMoney = false;
      this.showRent = true;
      this.showBase = false;
      this.showMend = false;
      this.showPoint = false;
      this.showHistory = false;
      this.showTitle = '用途信息';
    },
    gopoint() {
      this.showhouse = false;
      this.showMoney = false;
      this.showPoint = true;
      this.showRent = false;
      this.showBase = false;
      this.showMend = false;
      this.showHistory = false;
      this.showTitle = '节点记录';
    },
    gomoney() {
      this.showhouse = false;
      this.showMoney = true;
      this.showRent = false;
      this.showBase = false;
      this.showMend = false;
      this.showPoint = false;
      this.showHistory = false;
      this.showTitle = '租金管理';
    },
    getSearchdetail() {
      const req = {
        handle: '76ABA4BE996F68CE15C917E318C173B275852EAA595983BF',
        hid: this.$route.query.hid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.detailData = ts.d.data.operation1[0].hash;
        this.detailData2 = ts.d.data.operation3;
        this.detailData3 = ts.d.data.operation2;
        this.certpaper = this.detailData.certpaper;
        this.htypeattach = this.detailData.htypeattach;
        this.image1 = this.detailData.image1;
        this.image2 = this.detailData.image2;
        this.image3 = this.detailData.image3;
        this.getSelectList('10', 'danwei2Arr', this.detailData.danwei1);
      });
    },
    showMendInfo(repairid) {
      console.log(repairid);
      const req = {
        handle: '76ABA4BE996F68CE15C917E318C173B2E734D388EBBFD802BFF0B9210751F692',
        token: localStorage.getItem('token'),
        repairid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.repairData = ts.d.data.operation1[0].hash;
        this.image = this.repairData.image;
      });
    },
    showRentInfo(rentid) {
      const req = {
        handle: '76ABA4BE996F68CE15C917E318C173B24A05C288BEC83E87',
        token: localStorage.getItem('token'),
        rentid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.rentData = ts.d.data.operation1[0].hash;
        this.rentagreement = this.rentData.rentagreement;
        this.rentuseattach = this.rentData.rentuseattach;
        this.actureuseattach = this.rentData.actureuseattach;
        this.rentdate = [this.rentData.rentstart, this.rentData.rentend];
      });
    },
    getLog() {
      const req = {
        handle: '76ABA4BE996F68CE7B9160D0DE918C4B40C0CF22BEDA93AA',
        hid: this.$route.query.hid,
        token: localStorage.getItem('token'),
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        console.log(ts.d.data.operation1);
        this.logData = ts.d.data.operation1;
      });
    },
  },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .picContent
    position: fixed;
    top 150px;
    right: 0;
    left: 0;
    margin: 0;
    margin: 0 auto;
    z-index: 5000;
    width 56%
  .picContent2
    position: fixed;
    top 150px;
    right: 0;
    left: 0;
    margin: 0;
    margin: 0 auto;
    z-index: 5000;
    width 31%
  .avatar ul li
    float left
    width 33%
    img
      width 120px
  .item-info>>>.el-date-editor .el-range-separator
    padding: 0
    line-height: 22px
  .item-info >>>.el-date-editor.el-input, .el-date-editor.el-input__inner
    width: 300px
    height: 30px
  .item-info >>>.el-input__inner
    height: 30px
    border-top: 2px solid #999
    border-radius: 0
  .item-info >>>.el-input__icon
    line-height: 22px
    color: #333
  .avatar >>>.el-upload--picture-card
    width: 90px
    height: 90px
    line-height: 100px
    margin-top: 20px
  .avatar >>>.el-upload-list--picture-card .el-upload-list__item
    width: 90px
    height: 90px
    margin-top: 20px
  .upload-btn >>>.el-upload-list__item
    width 160%
  .sub-btn >>> .el-button--success
    background: #69f
    border-color: #69f
  .sub-btn >>> .el-button
    padding: 8px 20px
  .info-wrapper
    position: absolute
    left: 0
    top: 0
    width: 100%
    .info-w
      height: 50px
      line-height: 50px
      width: 100%
      background: #69f
      color: #fff
      cursor: pointer
      .info-c
        width: 1200px
        margin: 0 auto
        .close
          display: inline-block
          margin-right: 20px
          .iconfont
            font-size: 20px
        .title
          display: inline-block
          font-size: 18px
    .info-content
      width: 1200px
      min-height: 600px
      margin: 0 auto 50px
      .upload-btn
        display: inline-block
        vertical-align: top
        margin-left: 5px
        width: 80px
        height: 30px
        line-height: 30px
        text-align: center
        border-radius: 5px
        color: #fff
      .info-tab
        cursor: pointer
        .tab-item
          display: inline-block
          width: 120px
          height: 40px
          line-height: 40px
          text-align: center
          border: 1px solid #ccc
          margin: 15px 0 15px -1px
          background: #fff
          &.active
            background: #69f
            color: #fff
      .item-info
        margin-bottom: 50px
        .left-info, .right-info
          display: inline-block
          vertical-align: top
          width: 600px
          .item
            margin-top: 5px
            height: 30px
            line-height: 30px
            &.icon
              position: relative
              .iconfont
                position: absolute
                top: 0
                right: 190px
            span
              display: inline-block
              vertical-align: top
              width: 120px
              color: #333333
              font-weight: 600
            input
              display: inline-block
              vertical-align: top
              width: 300px
              height: 30px
              border: 1px solid #ccc
              border-top: 2px solid #999
            select
              display: inline-block
              width: 300px
              height: 30px
              border: 1px solid #ccc
              border-top: 2px solid #999
              text-align: right
              &.min1
                width: 100px
              &.min2
                width: 200px
                margin-left: -1px
            &.textarea
              height: 150px
              textarea
                width: 300px
                height: 150px
                border: 1px solid #ccc
                border-top: 2px solid #999
            &.spec
              height: 70px
              span
                float: left
              .text
                display: inline-block
                input:nth-of-type(1)
                  width: 100px
                input:nth-of-type(2)
                  width: 200px
                &:nth-of-type(2)
                  margin-top: 5px
            &.spec2
              height: 30px
              .text
                display: inline-block
                input
                  display: inline-block
                  vertical-align: top
                input:nth-of-type(1)
                  width: 200px
                input:nth-of-type(2)
                  width: 100px
                select
                  display: inline-block
                  vertical-align: top
                  width: 100px
            &.spec3
              height: 70px
              span
                height: 70px
                float: left
              .text
                display: inline-block
                margin-top: 5px
                input:nth-of-type(1)
                  width: 200px
                input:nth-of-type(2)
                  width: 100px
            &.spec4
              height: 70px
              span
                float: left
                height: 70px
              input
                margin-top: 5px
            &.spec5
              .line
                display: inline-block
                vertical-align: middle
                width: 20px
                height: 1px
                background: #ccc
              .iconfont
                &:ntn-of-type(1)
                  right: 190px
                &:nth-of-type(2)
                  right: 350px
          .upload
            width: 400px
            margin-top: 5px
            text-align: center
            .avatar
              width: 400px
              height: 200px
              border: 1px solid #ccc
              margin-bottom: 15px
            .desc
              margin-bottom: 15px
            .btn
              display: inline-block
              margin-bottom: 15px
              width: 80px
              height: 30px
              line-height: 30px
              text-align: center
              border-radius: 5px
              background: #69f
              color: #fff
        .info-list
          margin-top: 50px
          border-top: 1px solid #ccc
          text-align: center
          .title
            padding: 30px 0
            font-weight: 600
            font-size: 18px
            color: #6699ff
          table
            text-align: center
            padding-left: 30px
            cursor: pointer
            border-collapse: collapse
            td, th
              border: 1px solid #ccc
              font-size: 14px
              color: #666
              height: 40px
            thead
              th
                font-weight: 600
                background-color: #F2F2F2
                &:nth-of-type(1)
                  width: 40px
                &:nth-of-type(2)
                  width: 75px
        &.base-info
          .right-info
            .item
              margin-top: 12px
        &.rent-info
          .right-info
            .item
              margin-top: 10px

        .check-history
          border-left: 2px solid #f1f1f1
          .list
            margin-left: 50px
            margin-bottom: 10px
            .record
              position: relative
              display: inline-block
              vertical-align: top
              width: 800px
              height: 60px
              line-height: 40px
              border: 1px solid #6699ff63
              padding: 10px
              .arrow
                position: absolute
                left: -20px
                top: 20px
                width: 20px
                height: 20px
                background: #fff
                .icon-sanjiao
                  position: absolute
                  left: 0
                  top: -7px
                  font-weight: 200
                  font-size: 30px
                  color: #6699ff63
              .node
                position: absolute
                left: -62px
                top: 20px
                width: 20px
                height: 20px
                background: #fff
                .icon-node1
                  position: absolute
                  left: 0
                  top: 0
                  line-height: 20px
                  color: #69f
                  font-size: 20px
              .type
                float: left
                width: 240px
              .person
                float: left
              .time
                float: right
                .iconfont
                  display: inline-block
                  vertical-align: top
                  margin-right: 5px
                span
                  &:last-child
                    &:hover
                      text-decoration underline
                      font-size 15px
                      transition all 0.1s
        span
          display: inline-block
          vertical-align: top
</style>
